<!--
- Author:  LiShibin.
- Date:    2018/11/8 0017.
- File:    advice.
-->
<template>
  <div>
    <div class="FormFilling hidden">
      <div @click="$utils.back" class="Topmenu"><i class="iconfont icon-youjiantou"><a href=""></a></i>
        <h1>意见反馈</h1>
        <span></span>
      </div>
      <!--<ul>-->
        <!--<li class="mb20" style="height: auto;">-->
          <!--<div class="rightcon" style="width: 100%;">-->
            <!--<textarea ref="username" class="inp" type="text" style="color: #333;height: 120px;" placeholder="请输入您的意见或建议" v-model="advice"></textarea>-->
          <!--</div>-->
        <!--</li>-->
      <!--</ul>-->
    </div>
    <div class="feedback">
      <div class="feedback_contact"><input type="text" placeholder="联系方式（电话/微信/QQ）" v-model="connect"></div>
      <div class="feedback_opinion"><textarea type="text" placeholder="您的反馈和建议是我们产品进步的原动力" v-model="advice"></textarea>
        <p class="feedback_opinion_num">0/200</p>
      </div>
      <div class="feedback_addimg">
        <p class="feedback_addimg_p"><i class="iconfont icon-tupian"></i>添加图片</p>
        <ul>
          <li alt="" v-for="(image , i) in images" @click="bingtap_preview(i)" v-show="images!=''"><img :src="image.src" style="width: 100%"  alt=""></li>
          <li v-show="images==''">
            <div>
              <image-upload
                class="but_1 wauto"
                ref='ImageUpload'
                :url='url'
                :touch-size = 1
                :multiple = false
                :lrz-options = {width:1024}
                field-name = 'serverImgFile'
                :data = {}
                :max-count = 1
                @chooseImages='bindtap_chooseImages'
                style="tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);opacity: 0; z-index: 999;height: 3.5rem"
              />
            </div>
          </li>
        </ul>
      </div>
      <div class="feedback_btn" @click="bindtap_upload">
        提交建议
      </div>
    </div>
    <img width="100%">
    <image-preview
      style="z-index:200"
      :images="preImages"
      v-model="index"
      :numIsShow="false"
      :deleteIsShow="false"
      @delete="bindtap_delete"
    />
    <!--<div style="margin-top: 30px;" class="pl20 pr20">-->
      <!--<button type="button" class="but_1 wauto btn-commit" @click="updateName">提交</button>-->
    <!--</div>-->
    <!--<back-nav></back-nav>-->
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import {ImageUpload, ImagePreview} from 'vue-image-upload-preview'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        advice: '',
        index: -1,
        images: [],
        connect: '',
        url: ''
      }
    },
    components: {
      'image-preview': ImagePreview,
      'image-upload': ImageUpload
    },
    created() {
      // this.url = 'http://taozibiao.com/mobile/index.php?act=goods_add&op=feedback&feedback=' + this.advice + '&connect=' + this.connect + '&member_id=' + this.memberInfo.member_id
    },
    computed: {
      preImages() {
        return this.images.map(v => { return v.src })
      }
    },
    methods: {
      updateName() {
        var advice = this.advice
        if (!advice) {
          this.$toast('请输入您的意见或建议！')
          return
        }
        this.$request.submitAdvice(advice, this.connect).then(data => {
          this.$toast('感谢您的反馈！')
          setTimeout(() => {
            this.$router.go(-1)
          }, 2000)
        })
      },
      bindtap_chooseImages(e) {
        /*
         * 选择成功 e是一个数组
         * e[0].file 图片文件对象，用于上传
         * e[0].src 图片base64，用于预览
         * e[0].compress 图片是否经过压缩
         */
        this.bindtap_delete()
        if (Array.isArray(e)) {
          this.images = this.images.concat(e)
          console.log(this.images.map(v => { return v.src }))
        } else {
          console.log(e)
        }
      },
      bindtap_delete(e) {
        /*
         * e 当前显示的图片的下标(双向绑定index，可以忽略e)
         * this.images 存储选择图片传过来的对象
         * this.index 双向绑定当前显示的图片的下标
         * 下面是删除的例子
         */
        this.images = this.images.filter((v, i) => {
          return this.index != i
        })
      },
      /**
       *  绑定函数 -- 预览图片
       */
      bingtap_preview(i) {
        this.index = i
      },
      /**
       *  绑定函数 -- 取消预览
       */
      bingtap_hiddenImg() {
        this.index = -1
      },
      bindtap_upload() {
        if (!this.connect) {
          this.$toast('请填写联系方式')
          return
        }
        if (!this.advice) {
          this.$toast('请填写反馈')
          return
        }
        if (this.images.length == 0) {
          this.$messageBox.confirm(`你确定提交这个意见吗?`).then(action => {
            this.updateName()
            // setTimeout(() => {
            //   this.$router.go(-1)
            // }, 2000)
          }).catch(() => {
          })
          return
        }
        this.url = this.$config.website + '/mobile/index.php?act=goods_add&op=feedback&feedback=' + this.advice + '&connect=' + this.connect + '&member_id=' + this.memberInfo.member_id
        this.$messageBox.confirm(`你确定提交这个意见吗?`).then(action => {
          this.$refs.ImageUpload.uploadImages(this.images).then(res => {
            console.log(res)
            this.$toast('感谢您的反馈')
            setTimeout(() => {
              this.$router.go(-1)
            }, 2000)
          }).catch(err => {
            console.log(err)
            this.$toast('反馈提交失败，可能是因为图片过大')
            setTimeout(() => {
              this.$router.go(-1)
            }, 2000)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>
  .btn-commit{background-color: #e3c143;border-radius: 25px;height: 1.75rem;line-height: 1.75rem;}
  textarea::-webkit-input-placeholder{
    color:#999;
  }
</style>
